<template>
	<div class="dialog-footer" :class="{fullScreen: isFullScreen}">
		<img :src="clearIcon" class="clear-icon" @click="setAiDialogList([])"/>
		<!--问题发送框-->
		<div class="footer-send">
			<textarea 
				id="auto-resize"
				v-model.trim="inputValue"
				class="footer-send-input"
				placeholder="有问题尽管问我哦～" 
				style="resize: none;"
				rows="1"
				@keyup.enter="postMessage"
			></textarea>
			<img  v-show="!inputValue" :src="clearIcon" class="sender-svg" @click="stopStream"/>
			<img  v-show="inputValue" :src="clearIcon" class="sender-svg" @click="stopStream"/>
		</div>
		<img :src="clearIcon" class="clear-icon" @click="$emit('openModal')"/>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex"
import { Dialog } from 'vant';
import clearIcon from '@/assets/images/clear.svg'
import { fetchEventSource } from '@microsoft/fetch-event-source'
import hljs from 'highlight.js';
export default {
	name: 'LmDialogFooter',
	props: {
		isFullScreen: {
			type: Boolean,
			default: false
		}
	},
	components: {
	},
	data() {
		return {
			clearIcon,
			inputValue:'',
			state: {},
			eventSource: null,
			markdown: '',
			markdownToHtml: '',
			inputStr: '你是谁',
			parentMessageId: 'f7b0c0a7-95b1-4af2-9100-8353a71286f6',
		}
	},
	computed: {
	},
	watch: {
		markdown: {
			handler(val) {
        let reg =new RegExp("<pre","g")//这里是处理使用prism插件后显示行号
				let str = marked.parse(this.markdown).replace(reg,`<pre class='line-numbers'`)
				setTimeout(() => {
					hljs.highlightAll()
				}, 100)
				this.markdownToHtml = str
				// console.log(str)
      },
      immediate: true
		}
	},
	mounted() {
		const textarea = document.getElementById('auto-resize');
		// 监听输入事件
		textarea.addEventListener('input', this.autoResize);
		// 可选：窗口大小变化时调整（响应式布局）
		window.addEventListener('resize', this.autoResize);
	},
	beforeDestroy() {
		const textarea = document.getElementById('auto-resize');
		textarea.removeEventListener('input', this.autoResize);
		window.removeEventListener('resize', this.autoResize);
	},
	methods: {
		...mapMutations(['setAiDialogList']),
		...mapActions(['postMsg', 'stopStream']),
		// 发送消息
		postMessage() {
			if(!this.inputValue) return
			this.postMsg({
				content: this.inputValue,
			})
			this.inputValue = ''
			this.$nextTick(() => {
				this.autoResize()
			})
		},
		autoResize() {
			const textarea = document.getElementById('auto-resize');
  		const maxHeight = 100; // 最大高度，单位px
			// 重置高度
			textarea.style.height = 'auto';
			// 计算内容高度（包括边框和滚动高度）
			let contentHeight = textarea.scrollHeight;
			
			// 如果内容高度超过最大高度，则固定为最大高度，并显示垂直滚动条
			if (contentHeight > maxHeight) {
				textarea.style.height = maxHeight + 'px';
				textarea.style.overflowY = 'auto'; // 显示滚动条
			} else {
				textarea.style.height = contentHeight + 'px';
				textarea.style.overflowY = 'hidden'; // 隐藏滚动条
			}
		},
		getAdviceInstruction() {
			console.log(this.inputValue + 'enger')
		},
		clearScreen() {
			
		},
	}
}
</script>

<style lang="scss" scoped>
.dialog-footer{
	background: #E6F0FF;
	border-radius: 4px;
	display: flex;
	padding: 8px 10px;
	align-items: flex-end;
	&.fullScreen{
		margin: 0;
	}
	.footer-send{
		flex: 1;
    padding: 9px;
		margin: 0 10px;
    display: inline-flex;
    vertical-align: middle;
    background: #FFFFFF;
		border-radius: 4px;
		align-items: flex-end;
		.footer-send-input{
			flex: 1;
			border: 0;
			line-height: 60px;
		}
		.sender-svg{
		}
	}
	.audio-svg{
		margin-right: 4px;
	}
	.clear-icon{
		width: 60px;
		height: 60px;
	}
	.add-file{
		margin-bottom: 9px;
	}
}
</style>